import React, { useState, useRef, useEffect } from 'react';
import { Button, Popover, Space } from 'antd';
import { connect } from 'umi';
import { categoryType_status } from '@/common/contact';
import Categories from './components/Categories';
import Table from './components/Table';
import './index.less';
const SelelctModel = (props) => {
  const { visible = {}, setSelectedRowKeys, selectedRowKeys, activeTabKey, dispatch, getCheckboxProps } = props;
  const { show = false, details = [] } = visible;
  useEffect(() => {
    setSelectedKeys(['']);
  }, [activeTabKey]);
  useEffect(() => {
    fetchData();
  }, [selectedKeys, activeTabKey]);

  const fetchData = () => {
    dispatch({
      type: 'liveStreaming/fetchListMaterialCategory',
      payload: {
        categoryType: activeTabKey,
      },
      callback: (e) => {
        setCategoryList(e);
      },
    });
  };
  const [categoryList, setCategoryList] = useState([]);
  const [selectedKeys, setSelectedKeys] = useState(['']);
  const rowSelection = {
    type: 'checkBox',
    onSelect: (record, selected, selectedRows) => {
      const { id } = record;
      if (selected) {
        setSelectedRowKeys([...selectedRowKeys, record]);
      } else {
        setSelectedRowKeys(
          selectedRowKeys.filter((item) => {
            return item.id != id;
          }),
        );
      }
    },
    onSelectAll: (selected, selectedRowsKey, changeRows) => {
      let selectedRows = selectedRowsKey.filter((val) => {
        if (val) {
          return true;
        }
      });
      if (selected) {
        setSelectedRowKeys([
          ...selectedRowKeys,
          ...selectedRows.reduce((item, val) => {
            let flag = true;
            selectedRowKeys.forEach((o) => {
              if (o.id == val.id) {
                flag = false;
              }
            });
            if (flag) {
              return [...item, val];
            }
            return item;
          }, []),
        ]);
      } else {
        setSelectedRowKeys(
          selectedRowKeys.reduce((item, val) => {
            let flag = true;
            changeRows.forEach((o) => {
              if (o.id == val.id) {
                flag = false;
              }
            });

            if (flag) {
              return [...item, val];
            }
            return item;
          }, []),
        );
      }
    },
    getCheckboxProps: (record) => {
      if (getCheckboxProps) {
        return getCheckboxProps(record)
      }
      else return {
        id: record.id
      }
    },
    // onChange: (selectedRowKeys, selectedRows) => {
    //   console.log(selectedRows,666);
    //   setSelectedRowKeys(selectedRows);
    // },
    selectedRowKeys: selectedRowKeys.map((item = {}) => {
      const { id = '' } = item;
      return id.toString();
    }),

    preserveSelectedRowKeys: true,
  };
  useEffect(() => {
    if (show) {
      setSelectedRowKeys(details);
    } else {
      setSelectedRowKeys([]);
    }
  }, [show]);
  // 搜索参数

  return (
    <Space align={'start'} style={{ width: '100%' }}>
      <Categories
        selectedKeys={selectedKeys}
        activeTabKey={activeTabKey}
        reload={fetchData}
        setSelectedKeys={setSelectedKeys}
        list={[
          {
            categoryName: `全部${categoryType_status[activeTabKey]}`,
            id: '',
            subMaterialCategoryList: categoryList,
          },
        ]}
      ></Categories>
      <Table
        rowSelection={rowSelection}
        categoryList={categoryList}
        activeTabKey={activeTabKey}
        selectedKeys={selectedKeys}
      ></Table>
    </Space>
  );
};

export default connect(({ selectionWindow, loading }) => ({}))(SelelctModel);
